<template>
  <div class="NewVipCard">
    <div class="content">
      <div class="header">
        <img :src="img" alt="">
      </div>
      <div class="bodyer">
        <div class="imgs" v-if="items.vip_info">
          <img :src="items.vip_info.avatar" alt="">
        </div>
        <div class="title">
          完成本章阅读
        </div>
        <div class="nums">
          <div class="div">
            <div>练习得分</div>
            <div>{{$route.query.total_fraction}}<span>分</span></div>
          </div>
          <div class="bor"></div>
          <div class="div">
            <div>今日已读</div>
            <div>{{$route.query.word_number}}<span>字</span></div>
          </div>
        </div>
        <div class="desc">
          <div class="imga"><img src="./img/copy.svg" alt=""></div>
          <div>
            <span>
              {{items.chapters.chapter_soundbite}}
            </span>
          </div>
        </div>
        <div class="btne">
          <p @click="go('Chapter',{book_id: $route.query.book_id})">返回章节列表<i class="iconfont icon-jinru"></i></p>
        </div>
      </div>
      <div class="foot" v-if="false">
        <transition name="showShardPopup">
          <div class="foots" v-if="isfoots">
            <div class="clos" @click="hideshowShardPopup"><i class="iconfont icon-danchuang-guanbi"></i></div>
            <div class="title" v-if="false"><i></i>分享提示<i></i></div>
            <div class="texts">
              点击右上角分享页面至朋友圈，添加10字以上感想，即可完成分享参与奖学金返还活动
            </div>
          </div>
        </transition>
      </div>
    </div>
    <OutPopup v-if="outpopup" v-on:Continue="Continue" v-on:Punch="Punch" v-on:closed="closed"></OutPopup>
    <popup v-show="popups" @hide="hidepopups"></popup>
  </div>
</template>

<script>
  import Json from './js/index'
  import OutPopup from '../../components/outPopup/index'
  import popup from './components/popups/index'
  import {Toast} from 'mint-ui'

  export default {
    name: 'index',
    data: function () {
      return {
        Math: Math.floor(Math.random() * Json.length),
        isfoots: false,
        img: '',
        items: {
          chapters: {
          }
        },
        popups: false,
        outpopup: false,
      }
    },
    mounted: function () {
      this.img = Json[this.Math].bg
      var _this = this
      setTimeout(() => {
        _this.isfoots = true
      }, 1000)
      this.updata(this.$route.query)
    },
    methods: {
      updata: function (data) {
        this.$axios.achivement_chapter(data).then(res => {
          this.items = res.data.qing_data
          // var sharestate = localStorage.getItem('tensharestate')
          // if (this.$Login.Vip_token.reading_vip_state === 1 && !sharestate && sharestate !== 1) {
          //   this.popups = true
          // }
          var data = {
            post_id: this.$route.query.user_chapter_read_record_id,
            share_type: 21,
            share_page: 'BookShelf'
          }
          this.share(data)
        })
      },
      hideshowShardPopup: function () {
        this.isfoots = false;
      },
      share: function (data) {
        var obj = {}
        var _this = this
        this.$axios.share_link_info(data).then(res => {

          var data = {
            title: res.data.qing_data.title,
            desc: res.data.qing_data.desc,
            link: res.data.qing_data.link,
            imgUrl: res.data.qing_data.img
          }
          obj.share_id = res.data.qing_data.share_id
          obj.share_token = res.data.qing_data.share_token
          this.$wx.ShareTimeline(data, res => {
            obj.share_mode = res.share_mode
            obj.share_type = 21
            _this.share_done(obj)
          })
          this.$wx.ShareAppMessage(data, res => {
            obj.share_mode = res.share_mode
            obj.share_type = 21
            _this.share_done(obj)
          })
        })
      },
      share_done: function (obj) {
        var _this = this
        this.$axios.share_done(obj).then(res => {
          if (res.data.qing_code !== 100) {
            return Toast({
              message: '分享失败',
              iconClass: 'iconfont icon-bangdingshibai',
              duration: 5000
            })
          }
          _this.outpopup = true
        })
      },
      go: function (name, obj) {
        this.$router.push({
          name: name,
          query: obj
        })
      },
      Continue: function () {
        this.outpopup = false
        this.go('Playing', {book_id: this.$route.query.book_id})
      },
      Punch: function () {
        this.outpopup = false
        this.go('Chapter', {
          book_id: this.$route.query.book_id,
          platform_book_id: parseInt(window.sessionStorage.getItem('ten_platform_book_id'))
        })
      },
      closed: function () {
        this.outpopup = false
      },
      hidepopups: function () {
        localStorage.setItem('tensharestate', 1)
        this.popups = false
      }
    },
    components: {OutPopup,popup}
  }
</script>

<style scoped>
  @import "./css/index.css";
</style>
